<cd-table [data]="data"
          [columns]="columns"
          columnMode="flex"
          [toolHeader]="false"
          [autoReload]="false"
          [autoSave]="false"
          [footer]="false"
          size="xs"
          [layer]="0"
          [limit]="0">
</cd-table>

<ng-template #cellScopeCheckboxTpl
             let-column="data.column"
             let-row="data.row"
             let-value="data.value">
  <div class="custom-control custom-checkbox">
    <input class="custom-control-input"
           id="scope_{{ row.scope }}"
           type="checkbox"
           [checked]="isRowChecked(row.scope)"
           [disabled]="isDisabled"
           (change)="onClickCellCheckbox(row.scope, column.prop, $event)">
    <label class="datatable-permissions-scope-cell-label custom-control-label"
           for="scope_{{ row.scope }}">{{ value }}</label>
  </div>
</ng-template>

<ng-template #cellPermissionCheckboxTpl
             let-column="data.column"
             let-row="data.row"
             let-value="data.value">
  <div class="custom-control custom-checkbox">
    <input class="custom-control-input"
           type="checkbox"
           [checked]="value"
           [disabled]="isDisabled"
           [id]="row.scope + '-' + column.prop"
           (change)="onClickCellCheckbox(row.scope, column.prop, $event)">
    <label class="custom-control-label"
           [for]="row.scope + '-' + column.prop"></label>
  </div>
</ng-template>

<ng-template #headerPermissionCheckboxTpl
             let-column="data">
  <div class="custom-control custom-checkbox">
    <input class="custom-control-input"
           id="header_{{ column.prop }}"
           type="checkbox"
           [disabled]="isDisabled"
           [checked]="isHeaderChecked(column.prop)"
           (change)="onClickHeaderCheckbox(column.prop, $event)">
    <label class="datatable-permissions-header-cell-label custom-control-label"
           for="header_{{ column.prop }}">{{ column.name }}</label>
  </div>
</ng-template>
